import { getAppGlobalData } from "@/utils/globalAppDataUtil";

/**
 * 顶部导航组件
 */
Component<
  {
    displayStyle: string;
  },
  {
    back: {
      type: BooleanConstructor;
      value: false;
    };
    style: {
      type: StringConstructor;
      value: "";
      observer: () => void;
    };
    title: {
      type: StringConstructor;
      value: "";
    };
  },
  {
    onBack(): void;
    buildDisplayStyle(): void;
  },
  {
    paddingTop: number;
    navBarHeight: number;
  }
>({
  options: {
    multipleSlots: true, // 在组件定义时的选项中启用多slot支持
  },
  /**
   * 组件的属性列表
   */
  properties: {
    /**
     * 是否显示后退按钮. 默认:false
     */
    back: {
      type: Boolean,
      value: false,
    },
    style: {
      type: String,
      value: "",
      observer() {
        wx.nextTick(() => {
          this.buildDisplayStyle();
        });
      },
    },
    title: {
      type: String,
      value: "",
    },
  },
  /**
   * 组件的初始数据
   */
  data: {
    displayStyle: "",
  },
  lifetimes: {
    attached() {
      const { systemInfoMenuButtonRectInfo } = getAppGlobalData();
      this.paddingTop = systemInfoMenuButtonRectInfo.statusBarHeight;
      this.navBarHeight = systemInfoMenuButtonRectInfo.navBarHeight;
      this.buildDisplayStyle();
    },
    ready() {
      wx.nextTick(() => {
        this.triggerEvent("mounted");
      });
    },
  },
  /**
   * 组件的方法列表
   */
  methods: {
    onBack() {
      wx.navigateBack({ delta: 1 });
    },
    buildDisplayStyle() {
      let displayStyle = `--nav-bar-height:${this.navBarHeight}px;padding-top:${this.paddingTop}px;`;
      if (this.properties.style) {
        displayStyle += this.properties.style;
      }
      this.setData({ displayStyle });
    },
  },
});
